<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>清除浮动</title>
    <style>
        #div1{width: 600px;height: 400px;background: antiquewhite; float: left;margin: 10px;padding: 5px;}
        #div2{width: 600px;height: 400px;background: antiquewhite; float: left}
        section{border: 10px solid red;margin: 0 0 10px 0;}
        /*a{float: left}*/
        img{margin: 0 4px 4px 0;float: left;}
        p{margin: 0; border: 2px solid red; width: 200px; }
        /*#div3{clear: left;}*/
        .clearfix:after{content: ".";display: block;height: 0;clear: both;}
    </style>
</head>
<body>
<div id="div1">
    <h1>为父元素 应用overflow:hidden</h1>
    <h2>浮动父元素</h2>
    <p>父元素内容的末尾添加非浮动元素，可以直接在标记中加，也可以通过给父元
        素添加 clearfix 类来加（当然，样式表中得需要相应的 clearfix 规则）</p>
</div>
<div id="div2">
    <section class="clearfix">
        <strong></strong>
        <img src="https://res.wx.qq.com/mpres/htmledition/images/advanced/dev_code22921f.jpg" alt=""/>
        <a href="#">测试<em>a</em>标签</a>
        <div id="div3"></div>
    </section>
    <p>段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签</p>
</div>

</body>
</html>